<template>
  <div class="card">
    <div class="title">
      <el-page-header
        content="添加单词"
        @back="goBack"
      />
    </div>
    <div class="body">
      <div class="base-message">
        <el-form
          label-width="150px"
          :model="formData"
        >
          <el-form-item label="选择单词文件">
            <input
              ref="pic"
              type="file"
              name="file"
              @change="upload"
            >
            <div>
              可以下载此模版进行修改后上传，后缀需要自己修改为xslx
              <a href="https://partner-seeking-1257287210.cos.ap-guangzhou.myqcloud.com/dynamic-static/2022/05/24/2022-05-24-16-05-33-441-l0--kOo1zHPgf-LB5lg9E.sheet">
                下载
              </a>
            </div>
          </el-form-item>
          <el-form-item label="选择加入的词典">
            <el-select
              v-model="formData.dictionaryId"
              placeholder="请选择加入的词典"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.type"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <el-button
        class="add-message"
        type="danger"
        @click="addArticle"
      >点击确认添加单词</el-button>
    </div>
  </div>
</template>

<script>
import { addWord, getDictionaryList } from '../../../api/word';
import { uploadExcel } from '@/api/upload';

export default {
  components: {

  },
  data() {
    return {
      varietyList: [],
      formData: {
        dictionaryExcelPath: '',
        dictionaryId: 0
      },
      options: [

      ]
    };
  },
  created() {
    getDictionaryList().then(res => {
      if (res.data.code === 200) {
        this.options = res.data.data.map(item => {
          return {
            id: item.id,
            type: item.dictionaryName
          };
        });
      }
    });
  },
  methods: {
    upload(e) {
      console.log(e);

      const formData = new FormData();
      console.log(e.target.files);
      Array.from(e.target.files).map(item => {
        console.log(item);
        formData.append('file', item); // 将每一个文件图片都加进formdata
      });
      uploadExcel(formData).then(res => {
        console.log(res);
        this.formData.dictionaryExcelPath = res.data.data.url;
        console.log(this.formData);
        this.$message.success('上传成功');
      });
    },
    goBack() {
      this.$emit('update:showIndex', 0);
      this.$emit('goBack');
    },
    addArticle() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      addWord(this.formData)
        .then((res) => {
          loading.close();
          this.goBack();
        })
        .catch((err) => {
          loading.close();
          console.log(err);
          this.$message.error('添加失败');
        });
    },
    onSelected(val) {
      console.log(val);
      const { province, city, area } = val;
      this.formData.province = province.value;
      this.formData.city = city.value;
      this.formData.county = area.value;
      console.log(val.city.code); //  打印出城市的code
    }
  }
};
</script>
<style lang="scss" scoped>
.card {
  /*background:rgba(255,255,255,1);*/
  // border: 1px solid rgba(211, 211, 211, 1);
  .title {
    width: 100%;
    height: 48px;
    background: rgba(241, 245, 249, 1);
    border: 1px solid rgba(211, 211, 211, 1);
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(27, 33, 63, 1);
    display: flex;
    align-items: center;
    padding-left: 32px;
    position: fixed;
    z-index: 999;
  }
  .body {
    width: 100%;
    padding: 60px;
    .variety-item {
      display: flex;
      .variety-item-title {
        // display: flex;
        // align-items: center;
        // margin-right: 30px;
      }
    }
    .base-message {
    }
    .introduce {
      width: 70%;
    }
  }
}
.add-message {
    margin-top: 50px;
    margin-left: 35px;
}
::v-deep .abstract textarea {
  height: 150px !important;
}
</style>
